<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>Login / Register</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background: #f3f4f6;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }

    .form-box {
      background: white;
      padding: 2rem;
      border-radius: 10px;
      box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
      width: 320px;
    }

    .form-box h2 {
      text-align: center;
      margin-bottom: 1rem;
    }

    .form-box input {
      width: 100%;
      padding: 10px;
      margin: 8px 0;
      border: 1px solid #ccc;
      border-radius: 6px;
    }

    .form-box button {
      width: 100%;
      padding: 10px;
      background-color: #2563eb;
      color: white;
      border: none;
      border-radius: 6px;
      cursor: pointer;
    }

    .form-box button:hover {
      background-color: #1d4ed8;
    }

    .message {
      text-align: center;
      color: red;
      margin-top: 10px;
    }

    .switch {
      text-align: center;
      margin-top: 10px;
      font-size: 0.9rem;
    }

    .switch a {
      color: #2563eb;
      cursor: pointer;
      text-decoration: underline;
    }
  </style>
</head>

<body>

  <div class="form-box">
    <h2 id="form-title">Login</h2>
    <input type="text" id="username" placeholder="Username" />
    <input type="password" id="password" placeholder="Password" />
    <button onclick="submitForm()">Submit</button>
    <div class="message" id="message"></div>
    <div class="switch">
      <span id="switch-text">Don't have an account? <a onclick="toggleMode()">Register</a></span>
    </div>
  </div>

  <script>
    let isLogin = true;

    async function toggleMode() {
      window.location.href = "register.html";
    }
    // 获取token
    const token = localStorage.getItem("token");

    async function submitForm() {
      const username = document.getElementById("username").value.trim();
      const password = document.getElementById("password").value.trim();
      const message = document.getElementById("message");

      if (!username || !password) {
        message.textContent = "Please enter both fields.";
        return;
      }

      const response = await fetch("/login", {
        method: "POST",
        // 添加token到请求头
        headers: {
          "Content-Type": "application/json",
          "Authorization": `${token}`
        },
        body: JSON.stringify({ username, password })
      });

      const data = await response.json();

      if (response.ok && data.success) {
        message.style.color = "green";
        message.textContent = data.message;
        if (isLogin) {

          // 保存 token 到 localStorage（或 sessionStorage）
          if (data.token) {
            localStorage.setItem("token", data.token);
          }

          setTimeout(() => window.location.href = "welcome.html", 1000);
        }
      } else {
        message.style.color = "red";
        message.textContent = data.message || "Error occurred";
      }
    }
  </script>

</body>

</html>